<template>
  <div id="LogIndex">
    <!-- 查询条件 -->
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input
          placeholder="用户名"
          v-model="queryParam.accountName"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="queryParam.modelName"
          clearable
          placeholder="模块名称"
          style="width: 100%;"
        >
          <el-option v-for="(item,index) in modelList" :key="index" :value="item" :label="item"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="queryParam.methodType"
          clearable
          placeholder="方法类型"
          style="width: 100%;"
        >
          <el-option :value="1" label="GET"></el-option>
          <el-option :value="2" label="POST"></el-option>
          <el-option :value="3" label="PUT"></el-option>
          <el-option :value="4" label="DELETE"></el-option>
          <el-option :value="5" label="其他"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="queryParam.sysType"
          clearable
          placeholder="调用类型"
          style="width: 100%;"
        >
          <el-option :value="1" label="WEB端"></el-option>
          <el-option :value="2" label="APP"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="queryParam.resType"
          clearable
          placeholder="日志类型"
          style="width: 100%;"
        >
          <el-option :value="1" label="正常"></el-option>
          <el-option :value="2" label="错误"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button
          @click="getTableData()"
          type="primary"
          icon="el-icon-search"
          plain
          >查询</el-button
        >
        <el-button
          @click="queryParamClean"
          type="warning"
          icon="el-icon-refresh"
          plain
          >清空</el-button
        >
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="methodDesc" label="操作方法">
          </el-table-column>
          <el-table-column prop="accountName" label="操作用户">
          </el-table-column>
          <el-table-column prop="modelName" label="所属模块"></el-table-column>
          <el-table-column prop="doTime" label="执行时间"></el-table-column>
          <el-table-column prop="state" width="180" label="日志类型">
            <template slot-scope="scope">
              <!-- scope.row 得到的是当前行的数据 -->
              <el-tag v-if="scope.row.resType == 1" type="success"
                >正常日志</el-tag
              >
              <el-tag v-else type="danger">错误日志</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sysType" width="180" label="调用类型">
            <template slot-scope="scope">
              <!-- scope.row 得到的是当前行的数据 -->
              <el-tag v-if="scope.row.sysType == 1" type="success"
                >WEB端</el-tag
              >
              <el-tag v-else type="primary">APP</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="220"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="toShow(scope.row.logID)"
                plain
                title="查看"
                size="mini"
                icon="el-icon-search"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页工具 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.page"
          :page-sizes="[10, 30, 60, 100]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 查看弹窗组件 -->
    <el-dialog
      title="用户详情"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :show-close="false"
      width="50%"
    >
      <el-descriptions :title="showData.userName" :column="3" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="closeShowData"
            >关闭</el-button
          >
        </template>
        <el-descriptions-item label="行为">
          {{showData.methodDesc}}
        </el-descriptions-item>
        <el-descriptions-item label="模块名称">
          {{showData.modelName}}
        </el-descriptions-item>
        <el-descriptions-item label="方法类型">
          <el-tag v-if="showData.methodType==1" type="success">GET</el-tag>
          <el-tag v-if="showData.methodType==2" type="info">POST</el-tag>
          <el-tag v-if="showData.methodType==3" type="warning">PUT</el-tag>
          <el-tag v-if="showData.methodType==4" type="danger">DELETE</el-tag>
          <el-tag v-if="showData.methodType==5" >其他</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="方法名">
          {{showData.methodName}}
        </el-descriptions-item>
        <el-descriptions-item label="方法参数">
          {{showData.methodParam}}
        </el-descriptions-item>
        <el-descriptions-item label="执行时间">
          {{showData.doTime}}
        </el-descriptions-item>
        <el-descriptions-item label="请求时间">
          {{showData.getTime}}
        </el-descriptions-item>
        <el-descriptions-item label="响应时间">
          {{showData.overTime}}
        </el-descriptions-item>
        <el-descriptions-item label="请求地址">
          {{showData.path}}
        </el-descriptions-item>
        <el-descriptions-item label="请求用户">
          {{showData.accountName}}
        </el-descriptions-item>
        <el-descriptions-item label="日志类型">
          <el-tag v-if="showData.resType==1" type="success">正常记录</el-tag>
          <el-tag v-else type="danger">异常记录</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="记录类型">
          <el-tag v-if="showData.sysType==1" type="success">WEB端调用</el-tag>
          <el-tag v-else>APP调用</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="异常信息">
          {{showData.ycMsg}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import * as axiosAPI from "@/api/log.js";
export default {
  name: "LogIndex",
  data() {
    return {
      // 是否是修改
      isEdit: false,
      // 页面中弹窗状态
      dialog: {
        show: false
      },
      // 查询参数
      queryParam: {
        userName: null,
        acEmail: null,
        state: null,
        modelName:null
      },

      // 查看时详情数据
      showData: {
        userName: null,
        acEmail: null,
        state: null,
        cwCount: 0
      },
      // 分页参数
      pageParam: {
        size: 10, // 每页显示的行数
        page: 1, // 当前访问的页码
        total: 100 // 总条目数
      },

      tableData: [],
      // 模块列表
      modelList:[]
    };
  },
  mounted() {
    this.getModelsList();

    this.getTableData();
  },
  methods: {
    // 查询模块数据
    getModelsList(){
      let _this = this;
      axiosAPI.getModels()
      .then(function(res){
        if(res.code =="0000"){
          _this.modelList = res.data;
        }
      });
    },
    // 查询数据表格
    getTableData() {
      let _this = this;
      axiosAPI.page(_this.queryParam, _this.pageParam).then(function(res) {
        if (res.code == "0000") {
          _this.tableData = res.data.rows;
          _this.pageParam.page = res.data.page;
          _this.pageParam.total = res.data.total;
          _this.pageParam.size = res.data.pageSize;
        }
      });
    },
    // 清空查询条件
    queryParamClean() {
      this.queryParam = {
        userName: null,
        acEmail: null,
        state: null,
        modelName:null
      };

      this.getTableData();
    },
    // 当每页显示的行数切换
    handleSizeChange(data) {
      this.pageParam.size = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 切换页码时
    handleCurrentChange(data) {
      this.pageParam.page = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 关闭详情查看弹窗
    closeShowData() {
      this.showData = {};

      this.dialog.show = false;
    },
    // 操作栏-查看
    toShow(pkID) {
      for (let i in this.tableData) {
        if (this.tableData[i].logID == pkID) {
          this.showData = this.tableData[i];
          break;
        }
      }

      this.dialog.show = true;
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>
